<template>
  <view class="pages">
    <view
      class="all_box"
      :style="{ height: !userInfo?.is_open || patientList.length == 0 ? heights + 'px' : '' }"
    >
      <!--头部用户信息-->
      <view :style="{ height: statusHeight + 30 + 'rpx' }"></view>
      <view class="head">
        <view class="head_t clear">
          <image :src="userInfo?.avatar || '/static/index/img.png'" class="head_t_img left"></image>
          <view class="head_t_btn left" v-show="!userInfo?.is_audit" @click="toPhy">点此认证</view>
          <view class="head_t_r right" v-show="userInfo?.is_audit == 1">
            <view v-show="userInfo?.rf_name || userInfo?.hospital_name">
              <view class="head_t_r_t clear">
                <view class="head_t_r_t_n left">{{ userInfo?.name }}</view>
                <view
                  class="head_t_r_t_r head_t_r_t_ra left"
                  v-show="userInfo?.level && userInfo?.level.length == 2"
                  >{{ userInfo?.level }}</view
                >
                <view
                  class="head_t_r_t_r head_t_r_t_rb left"
                  v-show="userInfo?.level && userInfo?.level.length == 3"
                  >{{ userInfo?.level }}</view
                >
                <view
                  class="head_t_r_t_r head_t_r_t_rc left"
                  v-show="userInfo?.level && userInfo?.level.length == 4"
                  >{{ userInfo?.level }}</view
                >
                <view
                  class="head_t_r_t_r head_t_r_t_rd left"
                  v-show="userInfo?.level && userInfo?.level.length == 5"
                  >{{ userInfo?.level }}</view
                >
              </view>
              <view class="head_t_r_b">{{ userInfo?.hospital_name }}</view>
            </view>
            <view
              class="head_t_r_name left"
              v-show="!userInfo?.rf_name && !userInfo?.hospital_name"
              >{{ userInfo?.name }}</view
            >
            <view class="head_t_r_s">
              <view
                class="head_t_r_s_box head_t_r_s_boxa"
                @click.stop="statusShow = !statusShow"
                v-show="userInfo?.is_show == 1"
              >
                <view class="head_t_r_s_d head_t_r_s_da"></view>
                <view class="head_t_r_s_t head_t_r_s_ta">接诊中</view>
                <image
                  class="head_t_r_s_j"
                  v-show="!statusShow"
                  src="@/static/index/xia.png"
                ></image>
                <image
                  class="head_t_r_s_j"
                  v-show="statusShow"
                  src="@/static/index/shang.png"
                ></image>
              </view>
              <view
                class="head_t_r_s_box head_t_r_s_boxb"
                @click.stop="statusShow = !statusShow"
                v-show="userInfo?.is_show == 0"
              >
                <view class="head_t_r_s_d head_t_r_s_db"></view>
                <view class="head_t_r_s_t head_t_r_s_tb">休息中</view>
                <image
                  class="head_t_r_s_j"
                  v-show="!statusShow"
                  src="@/static/index/xia.png"
                ></image>
                <image
                  class="head_t_r_s_j"
                  v-show="statusShow"
                  src="@/static/index/shang.png"
                ></image>
              </view>
              <view class="head_t_r_s_lb" v-show="statusShow">
                <view
                  class="head_t_r_s_lb_l"
                  v-for="(item, index) in statusList"
                  :key="index"
                  @click.stop="statusChange(index)"
                  >{{ item?.text }}</view
                >
              </view>
            </view>
          </view>
        </view>
        <view class="head_f u-flex">
          <view class="head_f_l">
            <view
              class="head_f_l_t"
              style="color: #5c5c5c"
              v-show="!userInfo?.is_audit || (!userInfo?.fans_num && userInfo?.is_audit == 1)"
              >-</view
            >
            <view
              class="head_f_l_t"
              style="color: #00c1b9"
              v-show="userInfo?.fans_num && userInfo?.is_audit == 1"
              >{{ userInfo?.fans_num }}</view
            >
            <view class="head_f_l_b">总计关注数</view>
          </view>
          <view class="head_f_l">
            <view
              class="head_f_l_t"
              style="color: #5c5c5c"
              v-show="
                userInfo?.is_audit == 0 || (!userInfo?.order_number && userInfo?.is_audit == 1)
              "
              >-</view
            >
            <view
              class="head_f_l_t"
              style="color: #00c1b9"
              v-show="userInfo?.order_number && userInfo?.is_audit == 1"
              >{{ userInfo?.order_number }}</view
            >
            <view class="head_f_l_b">完成订单数</view>
          </view>
          <view class="head_f_l">
            <view
              class="head_f_l_t"
              style="color: #5c5c5c"
              v-show="!userInfo?.is_audit || (!userInfo?.creations_num && userInfo?.is_audit == 1)"
              >-</view
            >
            <view
              class="head_f_l_t"
              style="color: #00c1b9"
              v-show="userInfo?.creations_num && userInfo?.is_audit == 1"
              >{{ userInfo?.creations_num }}</view
            >
            <view class="head_f_l_b">内容创作数</view>
          </view>
        </view>
      </view>
      <view class="heada clear" v-if="scrollView >= 120">
        <h-line :height="statusHeight"></h-line>
        <image :src="userInfo?.avatar || '/static/index/img.png'" class="heada_img left"></image>
        <view class="heada_btn left" v-show="!userInfo?.is_audit" @click="toPhy">点此认证</view>
        <view class="heada_cen left" v-show="userInfo?.is_audit == 1">
          <view class="heada_cen_l left">{{ userInfo?.name }}</view>
          <view
            class="heada_cen_r head_t_r_t_ra left"
            v-show="userInfo?.level && userInfo?.level.length == 2"
            >{{ userInfo?.level }}</view
          >
          <view
            class="heada_cen_r head_t_r_t_rb left"
            v-show="userInfo?.level && userInfo?.level.length == 3"
            >{{ userInfo?.level }}</view
          >
          <view
            class="heada_cen_r head_t_r_t_rc left"
            v-show="userInfo?.level && userInfo?.level.length == 4"
            >{{ userInfo?.level }}</view
          >
          <view
            class="heada_cen_r head_t_r_t_rd left"
            v-show="userInfo?.level && userInfo?.level.length == 5"
            >{{ userInfo?.level }}</view
          >
        </view>
        <view class="heada_r right" v-show="userInfo?.is_audit == 1">
          <view
            class="heada_r_d left"
            :style="{ background: statusIndex == 0 ? '#AAAAAA' : '#8BCA64' }"
          ></view>
          <view class="heada_r_t left" :style="{ color: statusIndex == 0 ? '#AAAAAA' : '#8BCA64' }"
            >{{ statusList[statusIndex]?.text }}
          </view>
        </view>
      </view>
      <!--常用工具-->
      <view class="nav common">
        <view class="nav_head">常用工具</view>
        <view class="nav_box u-flex">
          <view
            class="nav_list"
            v-for="(item, index) in toolList"
            :key="index"
            @click="toBindUrl(index, item)"
          >
            <image class="nav_list_img" :src="item?.icon"></image>
            <view class="nav_list_text">{{ item?.title }}</view>
          </view>
        </view>
      </view>

      <view class="section common" v-show="!userInfo?.is_open" style="flex: 1">
        <view class="sec_open">
          <view>
            <image class="sec_open_img" src="@/static/index/zwyw.png"></image>
            <view class="sec_open_text">暂无开通业务</view>
            <view class="sec_open_btn" @click="toOpen">立即开通</view>
          </view>
        </view>
      </view>
      <view
        class="section common"
        v-show="userInfo?.is_open"
        :style="{ flex: patientList.length == 0 ? '1' : '' }"
        style="overflow: hidden"
      >
        <view class="sec_title">待办事项</view>
        <view class="sec_top">
          <view class="sec_top_t clear">
            <image class="sec_top_t_icon left" src="@/static/index/zhen.png"></image>
            <view class="sec_top_t_l left">我的诊室</view>
            <view class="sec_top_t_r right"
              >待处理事项：
              <view class="sec_top_t_r_num">{{ allNum || 0 }}</view>
            </view>
          </view>
          <view class="sec_top_b flex" v-show="typeList.length == 2">
            <view
              class="sec_top_b_box"
              v-for="(item, index) in typeList"
              :key="index"
              @click="toSurgery(item)"
              :style="{ backgroundImage: `url(${item.back})` }"
            >
              <view class="sec_top_b_box_t">
                <view class="sec_top_b_box_t_l"
                  >{{ item.service_name }}<text>{{ item.unread_news_count }}</text></view
                >
                <image class="sec_top_b_box_t_r" src="@/static/index/right.png"></image>
              </view>
              <view class="sec_top_b_box_f clear">
                <image
                  class="sec_top_b_box_f_img left"
                  v-for="(items, indexs) in item.users"
                  :key="index"
                  :src="items.avatar"
                ></image>
              </view>
            </view>
          </view>
          <view
            class="sec_top_b flex"
            v-show="typeList.length == 1"
            v-for="(item, index) in typeList"
            :key="index"
            @click="toSurgery(item)"
          >
            <view
              class="sec_top_b_box"
              style="width: 622rpx"
              :style="{ backgroundImage: `url(${item.backa})` }"
            >
              <view class="sec_top_b_box_t">
                <view class="sec_top_b_box_t_l"
                  >{{ item.service_name }}<text>{{ item.unread_news_count }}</text></view
                >
                <image class="sec_top_b_box_t_r" src="@/static/index/right.png"></image>
              </view>
              <view class="sec_top_b_box_f clear">
                <image
                  class="sec_top_b_box_f_img left"
                  v-for="(items, indexs) in item.users"
                  :key="index"
                  :src="items.avatar"
                ></image>
              </view>
            </view>
          </view>
          <view class="sec_top_b" v-show="typeList.length > 2">
            <view :style="{ width: 300 * typeList.length - 20 + 'rpx' }" class="flex">
              <view
                style="width: 280rpx"
                class="sec_top_b_box"
                v-for="(item, index) in typeList"
                :key="index"
                @click="toSurgery(item)"
                :style="{ backgroundImage: `url(${item.backc})` }"
              >
                <view class="sec_top_b_box_t">
                  <view class="sec_top_b_box_t_l"
                    >{{ item.service_name }}<text>{{ item.unread_news_count }}</text></view
                  >
                  <image class="sec_top_b_box_t_r" src="@/static/index/right.png"></image>
                </view>
                <view class="sec_top_b_box_f clear">
                  <image
                    class="sec_top_b_box_f_img left"
                    v-for="(items, indexs) in item.users"
                    :key="index"
                    :src="items.avatar"
                  ></image>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="sec_item" v-show="patientList.length">
          <view
            class="sec_item_list clear"
            v-for="(item, index) in patientList"
            :key="index"
            @click="toChart(item)"
          >
            <view class="sec_item_list_img left">
              <image
                class="sec_item_list_img_img"
                :src="item?.avatar || '/static/index/img.png'"
              ></image>
              <view class="sec_item_list_img_t" v-show="item?.is_certified == 1">已实名</view>
              <view class="sec_item_list_img_dian" v-show="item?.unread_num"></view>
            </view>
            <view class="sec_item_list_d right">
              <view class="sec_item_list_d_t">
                <view class="sec_item_list_d_t_l">
                  <view class="sec_item_list_d_t_l_n">{{ item?.nickname }}</view>
                  <!--<view class="sec_item_list_d_t_l_d">{{ getSex(item?.sex) }}</view>
									<view class="sec_item_list_d_t_l_x">|</view>
									<view class="sec_item_list_d_t_l_d">{{ item?.age }}岁</view>-->
                  <view
                    class="sec_item_list_d_t_l_l sec_item_list_d_t_l_la"
                    v-show="item?.transaction_type == 1"
                    >图文</view
                  >
                  <view
                    class="sec_item_list_d_t_l_l sec_item_list_d_t_l_lb"
                    v-show="item?.transaction_type == 2"
                    >孕产跟踪</view
                  >
                  <view
                    class="sec_item_list_d_t_l_l sec_item_list_d_t_l_lc"
                    v-show="item?.transaction_type == 3"
                    >男性问诊</view
                  >
                  <view
                    class="sec_item_list_d_t_l_l sec_item_list_d_t_l_ld"
                    v-show="item?.transaction_type == 4"
                    >儿科问诊</view
                  >
                  <view
                    class="sec_item_list_d_t_l_l sec_item_list_d_t_l_lb"
                    v-show="item?.pay_status == 1&&item?.transaction_type == 2"
                    >已绑定</view
                  >
                  <view
                    class="sec_item_list_d_t_l_l sec_item_list_d_t_l_lc"
                    v-show="item?.pay_status == 1&&item?.transaction_type == 3"
                    >已绑定</view
                  >
                  <view
                    class="sec_item_list_d_t_l_l sec_item_list_d_t_l_ld"
                    v-show="item?.pay_status == 1&&item?.transaction_type == 4"
                    >已绑定</view
                  >
                </view>
                <view class="sec_item_list_d_t_r" v-show="item?.wait_time"
                  >等待:<text>{{ item?.wait_time }}</text></view
                >
              </view>
              <view class="sec_item_list_d_b" v-if="item?.content"
                ><text v-if="item?.unread_num">[{{ item?.unread_num }}条]</text
                >{{ processingData(JSON.parse(item?.content)) }}</view
              >
            </view>
          </view>
        </view>
        <view class="sec_open" v-show="patientList.length == 0 && !loading">
          <view>
            <image class="sec_open_img" src="@/static/index/inone.png"></image>
            <view class="sec_open_text">暂无数据</view>
          </view>
        </view>
      </view>
      <h-line :height="20 + bottoms"></h-line>
    </view>

    <h-modal
      :show="setPriceShow"
      titlea="请先设置问诊价格"
      leftBtn="稍后再说"
      rightBtn="去设置"
      @clear="setPriceShow = false"
      @bind="toSet"
    ></h-modal>
    <h-modal
      :show="setOpenShow"
      titlea="还未开通业务，请先开通业务"
      leftBtn="稍后再说"
      rightBtn="立即开通"
      @clear="setOpenShow = false"
      @bind="toOpen(), (setOpenShow = false)"
    ></h-modal>
    <h-login ref="login"></h-login>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'
import { formatDate } from '@/utils/utils'
import { navigateTo, showToast, navigateBack, redirectTo, switchTab } from '@/utils'
import {
  onLoad,
  onPullDownRefresh,
  onReachBottom,
  onReady,
  onShow,
  onPageScroll,
  onUnload,
  onHide,
  onBackPress,
} from '@dcloudio/uni-app'
import { useMemberStore } from '@/stores'
import { doctorInfo, switchReceive } from '@/api/home'
import { doctorUnreadNoticeList, doctorAllNoticeList, doctorBusinessTypeNews } from '@/api/business'
const login = ref(null) // 登录组件实例
const token = ref('')
const statusHeight = ref(0)
const showLogin = ref(true)
const userInfo = ref({
  avatar: '',
  name: '',
  is_audit: 1,
  is_show: 0,
  hospital_name: '',
  rf_name: '',
  level: '',
  follow_num: 0,
  orderNum: 0,
  creations_num: 0,
  pendingNum: 0,
  is_apply_audit: 0,
  openProject: 0,
  is_open: 0,
})
const isPrice = ref(1)
const setOpenShow = ref(false)
const setPriceShow = ref(false)
const allNum = ref(0)
var scrollView = ref(0)
const statusList = ref([
  {
    text: '休息中',
    value: 0,
  },
  {
    text: '接诊中',
    value: 1,
  },
])
const loading = ref(false)
const statusShow = ref(false)
const statusIndex = ref(0)
const toolList = ref([
  {
    icon: '/static/index/cj.png',
    title: '常用建议',
    url: '/common/suggest/index?type=1',
  },
  {
    icon: '/static/index/cc.png',
    title: '常用处方',
    url: '',
  },
  {
    icon: '/static/index/cw.png',
    title: '常用问卷',
    url: '', ///common/questionnaire/index
  },
  {
    icon: '/static/index/ch.png',
    title: '患者随访',
    url: '',
  },
])
const patientList = ref([])
const typeList = ref([])
onLoad((o) => {
  const store = useMemberStore()
  if (!store?.token) {
    store?.setislogin(0)
  }
})
let pages = getCurrentPages() // 获取所有页面栈的实例数组
let currentPage = pages[pages.length - 1] // 获取最后一个页面的实例
let currentRoute = currentPage.route // 获取当前页面的路由
onShow(() => {
  const store = useMemberStore()
  token.value = store?.token
  console.log(!store?.token && store.islogin == 0, '执行了', currentRoute, pages[pages.length])
  if (!store?.token && store.islogin == 0) {
    nextTick(() => {
      login.value.open()
    })
  } else {
    if (!store?.token) {
      if (currentRoute != '/pages-users/login-page/login') {
        navigateTo('/pages-users/login-page/login?ll=1', 0)
      }
    }
  }

  if (store?.token) {
    getDoctorInfo()
  }
})
onPageScroll(({ scrollTop }) => {})
const bottoms = ref(0)
const heights = ref(0)
onReady(() => {
  // #ifdef APP-PLUS || APP-IOS || APP-ANDROID
  uni.preLogin({
    provider: 'univerify',
  })
  // #endif
  uni.getSystemInfo({
    success: (e) => {
      console.log(e)
      heights.value = e.windowHeight
      statusHeight.value = e.statusBarHeight * 2
      bottoms.value = e.safeAreaInsets.bottom * 2
    },
  })
})

function toSurgery(row) {
  console.log(row)
  getPatList(row.transaction_id)
  uni.setStorageSync('transactionId', row.transaction_id)
  //switchTab('/pages/surgery/surgery?id=' + row.transaction_id)
}
async function getTypeList() {
  const res = await doctorBusinessTypeNews()
  const list = res.data.list
  getPatList(list[0].transaction_id)
  for (var i in list) {
    if (list[i].service_name == '孕产跟踪') {
      list[i].back = '/static/index/yunchan.png'
      list[i].backa = '/static/index/yunchan.png'
      list[i].backc = '/static/index/ycb.png'
    } else if (list[i].service_name == '男性问诊') {
      list[i].back = '/static/index/nanb.png'
      list[i].backa = '/static/index/nana.png'
      list[i].backc = '/static/index/nxb.png'
    } else if (list[i].service_name == '图文问诊') {
      list[i].back = '/static/index/tuwen.png'
      list[i].backa = '/static/index/tuwen.png'
      list[i].backc = '/static/index/tuwen.png'
    } else if (list[i].service_name == '儿科问诊') {
      list[i].back = '/static/index/ekb.png'
      list[i].backa = '/static/index/ek1.png'
      list[i].backc = '/static/index/ekc.png'
    }
  }
  typeList.value = list
  allNum.value = res?.data?.total_unread_news_count
}
async function getPatList(id) {
  uni.showLoading({
    title: '加载中',
  })
  loading.value = true
  const res = await doctorAllNoticeList({
    transaction_type: id,
  })
  setTimeout(function () {
    patientList.value = res.data || []
    loading.value = false
    uni.hideLoading()
  }, 1000)
}

function toLogin() {
  navigateTo('/pages-users/login-page/login')
}

function toPhy() {
  if (!token.value) {
    navigateTo('/pages-users/login-page/login')
    return false
  }
  navigateTo('/pages-users/my-page/physician?isIndex=1')
}

function toOpen() {
  if (!userInfo.value.is_audit) {
    showToast('您未完成认证，无法开通业务')
    return false
  }
  if (userInfo.value.is_apply_audit == -1) {
    showToast('您未完成认证，无法开通业务')
    return false
  } else if (userInfo.value.is_apply_audit == 0) {
    showToast('医师认证审核中，请耐心等待')
    return false
  }
  if (!token.value) {
    navigateTo('/pages-users/login-page/login')
    return false
  }
  navigateTo('/pages-users/business-management/index')
}
async function getDoctorInfo() {
  const res = await doctorInfo()
  statusIndex.value = res?.data?.is_show || 0
  if (res?.data?.is_open) {
    getTypeList()
  }
  uni.setStorageSync('userInfo', res.data)
  userInfo.value = res.data
}

function toBindUrl(index, row) {
  if (row.url) {
    navigateTo(row?.url)
  } else {
    showToast('暂未开通，敬请期待')
    return false
  }
}

function toSet() {
  setPriceShow.value = false
  navigateTo('/pages-users/inquiry/index')
}

function toChart(row) {
  if (row.children_user_id) {
    navigateTo(
      `/pregnancys/index/doctor-chat?uid=${row?.uid}&name=${row?.nickname}&avatar=${row?.avatar}&chat_type=${row?.service_type}&childId=${row?.children_user_id}`,
    )
  } else {
    navigateTo(
      `/pregnancys/index/doctor-chat?uid=${row?.uid}&name=${row?.nickname}&avatar=${row?.avatar}&chat_type=${row?.service_type}`,
    )
  }
}

function getSex(sex) {
  var text = ''
  if (sex == 0) {
    text = '女'
  } else {
    text = '男'
  }
  return text
}

function processingData(o) {
  console.log(o)
  if (o.type == 'TIMTextElem') {
    if (o.payload.text == '请先留言，医生上线后将第一时间回复') {
      return '用户已留言，请尽快回复'
    } else {
      return o?.payload?.text
    }
  } else if (o.type == 'TIMImageElem') {
    return '图片消息'
  } else if (o.type == 'TIMSoundElem') {
    return '语音消息'
  } else if (
    o?.payload?.data == '1' ||
    o?.payload?.data == '2' ||
    o?.payload?.data == '3' ||
    o?.payload?.data == '4' ||
    o?.payload?.data == '5' ||
    o?.payload?.data == '6' ||
    o?.payload?.data == '7' ||
    o?.payload?.data == '8'
  ) {
    return '卡片消息'
  }
}
async function statusChange(index) {
  if (!userInfo.value?.is_open) {
    setOpenShow.value = true
    statusShow.value = false
    return false
  }
  const res = await switchReceive({
    type: statusList.value[index].value,
  })
  if (res.code == 200) {
    statusIndex.value = index
    userInfo.value.is_show = statusList.value[index].value
  } else if (res.code == 500) {
    setPriceShow.value = true
    statusShow.value = false
  } else {
    showToast(res.message)
  }
  statusShow.value = false
}
</script>
<style lang="scss">
page {
  background: #f5f6f8;
}
</style>
<style lang="scss" scoped>
.pages {
  background: linear-gradient(180deg, #00c1b9 0, #f5f6f8 340rpx);
  width: 750rpx;
  overflow: hidden;
}
.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row;
}

.clear:after {
  /*START 真正起到清除浮动的代码*/
  content: '';
  display: block;
  clear: both;
  /*END 真正起到清除浮动的代码*/
  height: 0;
}

.clear {
  display: inline-block;
}

.left {
  float: left;
}

.right {
  float: right;
}
.all_box {
  width: 702rpx;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.heada {
  width: 750rpx;
  padding: 8rpx 0;
  background: #fff;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  .heada_img {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-left: 24rpx;
  }
  .heada_btn {
    width: 180rpx;
    background: #ffffff;
    border-radius: 30rpx;
    border: 1rpx solid #00c1b9;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #00c1b9;
    box-sizing: border-box;
    line-height: 50rpx;
    text-align: center;
    margin-top: 14rpx;
    margin-left: 20rpx;
  }
  .heada_cen {
    margin-left: 20rpx;
    .heada_cen_l {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 36rpx;
      color: #202020;
      line-height: 80rpx;
    }
    .heada_cen_r {
      width: 130rpx;
      height: 30rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 20rpx;
      line-height: 30rpx;
      color: #fff;
      text-align: center;
      margin-top: 8rpx;
      margin-left: 10rpx;
      box-sizing: border-box;
      padding-left: 16rpx;
      background: url('/static/index/ysbq.png') no-repeat;
      background-size: cover;
      zoom: 0.97;
      margin-top: 25rpx;
    }
    .head_t_r_t_ra {
      width: 80rpx;
      background: url('/static/index/ysa.png') no-repeat;
      background-size: cover;
    }
    .head_t_r_t_rb {
      width: 100rpx;
      background: url('/static/index/ysb.png') no-repeat;
      background-size: cover;
    }
    .head_t_r_t_rc {
      width: 130rpx;
      background: url('/static/index/ysc.png') no-repeat;
      background-size: cover;
    }
    .head_t_r_t_rd {
      width: 160rpx;
      background: url('/static/index/ysd.png') no-repeat;
      background-size: cover;
    }
  }
  .heada_r {
    margin: 21rpx 24rpx;
    height: 38rpx;
    .heada_r_d {
      width: 14rpx;
      height: 14rpx;
      background: #8bca64;
      border-radius: 50%;
      margin: 12rpx;
    }
    .heada_r_t {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #56b21c;
      line-height: 38rpx;
      text-align: left;
      font-style: normal;
    }
  }
}

.head {
  width: 702rpx;
  background: #ffffff;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
  .head_t {
    padding-top: 20rpx;
    position: relative;
    .head_t_img {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-right: 15rpx;
      background: linear-gradient(180deg, #f5f6f8 0%, #a0e3e0 100%);
    }
    .head_t_btn {
      width: 180rpx;
      height: 50rpx;
      background: #ffffff;
      border-radius: 30rpx;
      border: 1rpx solid #00c1b9;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #00c1b9;
      line-height: 50rpx;
      text-align: center;
      margin-top: 24rpx;
    }
    .head_t_r {
      width: 540rpx;
      height: 100rpx;
      overflow: hidden;
      .head_t_r_t {
        margin-top: 8rpx;
        .head_t_r_t_n {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #202020;
          line-height: 42rpx;
        }
        .head_t_r_t_r {
          height: 30rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 20rpx;
          line-height: 30rpx;
          color: #fff;
          text-align: center;
          margin-top: 8rpx;
          margin-left: 10rpx;
          box-sizing: border-box;
          padding-left: 16rpx;
          zoom: 0.97;
        }
        .head_t_r_t_ra {
          width: 80rpx;
          background: url('/static/index/ysa.png') no-repeat;
          background-size: cover;
        }
        .head_t_r_t_rb {
          width: 100rpx;
          background: url('/static/index/ysb.png') no-repeat;
          background-size: cover;
        }
        .head_t_r_t_rc {
          width: 130rpx;
          background: url('/static/index/ysc.png') no-repeat;
          background-size: cover;
        }
        .head_t_r_t_rd {
          width: 160rpx;
          background: url('/static/index/ysd.png') no-repeat;
          background-size: cover;
        }
      }
      .head_t_r_b {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #5c5c5c;
        line-height: 37rpx;
      }
      .head_t_r_name {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #202020;
        line-height: 100rpx;
      }
      .head_t_r_s {
        position: absolute;
        width: 172rpx;
        height: 48rpx;
        border-radius: 34rpx 0rpx 0rpx 34rpx;
        right: -26rpx;
        top: 46rpx;
        .head_t_r_s_box {
          width: 172rpx;
          height: 48rpx;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          border-radius: 34rpx 0rpx 0rpx 34rpx;
          box-sizing: border-box;
          padding: 0 16rpx;
          background: #f5f6f8;
          .head_t_r_s_d {
            width: 14rpx;
            height: 14rpx;
            border-radius: 50%;
            margin-top: 16rpx;
          }
          .head_t_r_s_t {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            line-height: 48rpx;
            padding-left: 6rpx;
          }
          .head_t_r_s_j {
            width: 20rpx;
            height: 20rpx;
            margin-top: 14rpx;
          }
        }
        .head_t_r_s_boxa {
          .head_t_r_s_da {
            background: #56b21c;
          }
          .head_t_r_s_ta {
            color: #56b21c;
          }
        }
        .head_t_r_s_boxb {
          .head_t_r_s_db {
            background: #aaaaaa;
          }
          .head_t_r_s_tb {
            color: #aaaaaa;
          }
        }
        .head_t_r_s_lb {
          width: 172rpx;
          background: #ffffff;
          box-sizing: border-box;
          padding: 0 20rpx;
          margin-top: 10rpx;
          box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(32, 32, 32, 0.1);
          .head_t_r_s_lb_l {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #202020;
            line-height: 88rpx;
            text-align: left;
            font-style: normal;
            text-align: center;
            border-bottom: 1rpx solid #f1f1f1;
          }
          .head_t_r_s_lb_l:last-of-type {
            border-bottom: none;
          }
        }
      }
    }
  }
  .head_f {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 30rpx 0;
    .head_f_l {
      width: 33.33%;
      text-align: center;
      .head_f_l_t {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 32rpx;
        color: #00c1b9;
        line-height: 45rpx;
      }
      .head_f_l_b {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #202020;
        line-height: 40rpx;
        margin-top: 10rpx;
      }
    }
  }
}

.common {
  width: 702rpx;
  background: #ffffff;
  border-radius: 20rpx;
  margin-top: 20rpx;
}

.nav {
  .nav_head {
    box-sizing: border-box;
    padding: 20rpx 0 0 20rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #202020;
    line-height: 42rpx;
  }
  .nav_box {
    padding: 20rpx 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .nav_list {
      width: 25%;
      text-align: center;
      .nav_list_img {
        width: 44rpx;
        height: 44rpx;
        display: block;
        margin: 10rpx auto 0;
      }
      .nav_list_text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #202020;
        line-height: 37rpx;
        margin-top: 10rpx;
      }
    }
  }
}

.section {
  display: flex;
  flex-direction: column;
  .sec_open {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: row;
    /* 子元素横向排列 */
    justify-content: center;
    /* 相对父元素水平居中 */
    align-items: center;
    .sec_open_img {
      width: 250rpx;
      height: 200rpx;
      display: block;
      margin: auto;
    }
    .sec_open_text {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #aaaaaa;
      line-height: 37rpx;
      margin-top: 20rpx;
    }
    .sec_open_btn {
      width: 360rpx;
      height: 88rpx;
      background: #00c1b9;
      border-radius: 48rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;
      line-height: 88rpx;
      text-align: center;
      font-style: normal;
      margin-top: 30rpx;
    }
  }
  .sec_title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #202020;
    line-height: 42rpx;
    margin-left: 20rpx;
    padding-top: 20rpx;
  }
  .sec_top {
    width: 662rpx;
    margin: 15rpx auto 0;
    background: linear-gradient(180deg, #00c1b9 0%, #8fe4e0 80rpx, rgba(255, 255, 255, 0) 100%);
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 0 20rpx;
    .sec_top_t {
      width: 100%;
      padding: 15rpx 0;
      .sec_top_t_icon {
        width: 24rpx;
        height: 28rpx;
        margin-top: 11rpx;
        margin-right: 10rpx;
      }
      .sec_top_t_l {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #ffffff;
        line-height: 40rpx;
        margin-top: 5rpx;
      }
      .sec_top_t_r {
        height: 50rpx;
        background: #ffffff;
        border-radius: 25rpx;
        padding: 0 10rpx 0 20rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #5c5c5c;
        line-height: 50rpx;
        .sec_top_t_r_num {
          float: right;
          height: 36rpx;
          min-width: 36rpx;
          background: #e75e56;
          border-radius: 18rpx;
          padding: 0 4rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #ffffff;
          line-height: 36rpx;
          text-align: center;
          margin-top: 7rpx;
        }
      }
    }
    .sec_top_b {
      overflow-y: scroll;
      .sec_top_b_box {
        margin-bottom: 20rpx;
        width: 301rpx;
        height: 157rpx;
        box-sizing: border-box;
        padding: 15rpx;
        background: linear-gradient(180deg, #ffffff 0%, #ccf3f1 100%);
        background-size: 100% 100%;
        border-radius: 10rpx;
        .sec_top_b_box_t {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .sec_top_b_box_t_l {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 26rpx;
            color: #00c1b9;
            line-height: 37rpx;
            text {
              color: #d76c6c;
              margin-left: 10rpx;
            }
          }
          .sec_top_b_box_t_r {
            width: 30rpx;
            height: 30rpx;
            margin-top: 5rpx;
          }
        }
        .sec_top_b_box_f {
          padding-top: 20rpx;
          .sec_top_b_box_f_img {
            width: 50rpx;
            height: 50rpx;
            margin-left: -10rpx;
            border-radius: 50%;
            border: -rpx solid #fff;
          }
          .sec_top_b_box_f_img:first-of-type {
            margin-left: 0;
          }
        }
      }
    }
  }
  .sec_item {
    min-height: 50vh;
    width: 100%;
    .sec_item_list:last-of-type .sec_item_list_d {
      border-bottom: none;
    }
    .sec_item_list {
      box-sizing: border-box;
      padding: 0 20rpx;
      width: 100%;
      .sec_item_list_img {
        width: 90rpx;
        padding: 25rpx 0;
        position: relative;
        .sec_item_list_img_img {
          width: 90rpx;
          height: 90rpx;
          border-radius: 10rpx;
        }
        .sec_item_list_img_t {
          width: 90rpx;
          height: 30rpx;
          background: rgba(32, 32, 32, 0.4);
          border-radius: 10rpx;
          text-align: center;
          line-height: 30rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #ffffff;
          position: absolute;
          bottom: 25rpx;
          left: 0;
        }
        .sec_item_list_img_dian {
          position: absolute;
          top: 20rpx;
          right: -5rpx;
          width: 18rpx;
          height: 18rpx;
          background: #e75e56;
          border-radius: 50%;
        }
      }
      .sec_item_list_d {
        width: 550rpx;
        min-height: 140rpx;
        padding: 25rpx 0;
        border-bottom: 1rpx solid #e8e8e8;
        .sec_item_list_d_t {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .sec_item_list_d_t_l {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .sec_item_list_d_t_l_n {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 30rpx;
              color: #202020;
              line-height: 42rpx;
              margin-right: 10rpx;
            }
            .sec_item_list_d_t_l_d {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 26rpx;
              color: #00c1b9;
              line-height: 42rpx;
              text-align: left;
              font-style: normal;
              margin-top: 3rpx;
            }
            .sec_item_list_d_t_l_x {
              color: #aaaaaa;
              font-size: 20rpx;
              padding: 0 10rpx;
              margin-top: 10rpx;
            }
            .sec_item_list_d_t_l_l {
              padding: 0 14rpx;
              height: 32rpx;
              box-sizing: border-box;
              border-radius: 16rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 22rpx;
              line-height: 32rpx;
              margin-left: 10rpx;
              margin-top: 6rpx;
              border: 1rpx solid #dea42e;
            }
            .sec_item_list_d_t_l_la {
              border-color: #dea42e;
              color: #dea42e;
            }
            .sec_item_list_d_t_l_lb {
              border-color: #d76c6c;
              color: #d76c6c;
            }
            .sec_item_list_d_t_l_lc {
              border-color: #00b3c5;
              color: #00b3c5;
            }
            .sec_item_list_d_t_l_ld {
              border-color: #54ceab;
              color: #54ceab;
            }
          }
          .sec_item_list_d_t_r {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #aaaaaa;
            padding-top: 2rpx;
            line-height: 42rpx;
            text {
              color: #00c1b9;
            }
          }
        }
        .sec_item_list_d_b {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #5c5c5c;
          line-height: 40rpx;
          margin-top: 8rpx;
          text-align: left;
          font-style: normal;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text {
            float: left;
          }
        }
      }
    }
  }
  .sec_none {
    text-align: center;
    display: flex;
    flex-direction: row;
    /* 子元素横向排列 */
    justify-content: center;
    /* 相对父元素水平居中 */
    align-items: center;
    .sec_none_img {
      width: 236rpx;
      height: 200rpx;
    }
    .sec_none_text {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #aaaaaa;
      line-height: 77rpx;
    }
  }
}
</style>
